<template>
<Content id="menuList">
    <Divider orientation="left">菜单列表</Divider>
    <div class="tree-left">
      <RadioGroup v-model="radioSelected"  @on-change="radioSelectedFun">
      <tree-item
        class="item"
        :item="treeData"
        @make-folder="makeFolder"
        @add-item="addItem"
        @ck-item="ckItem"
      ></tree-item>
      </RadioGroup>
    </div>
    <div class="tree-middel">
      <Form :model="formItem" :label-width="80" v-if="formItem.pid">
          <FormItem label="菜单id">
              <Input v-model="formItem.menu_id"  disabled placeholder="请输入模块"></Input>
          </FormItem>
          <FormItem label="租户">
              <Input v-model="formItem.domain"  disabled placeholder="请输入模块"></Input>
          </FormItem>
          <FormItem label="菜单名称">
              <Input v-model="formItem.menu_name" v-if="formItem.menu_name=='root'" disabled placeholder="请输入菜单名称"></Input>
              <Input v-model="formItem.menu_name" v-else   placeholder="请输入菜单名称"></Input>
          </FormItem>
          <FormItem label="父菜单id">
              <Input v-model="formItem.pid" v-if="formItem.menu_name=='root'" disabled  placeholder="请输入父菜单id"></Input>
              <Input v-model="formItem.pid" v-else  placeholder="请输入父菜单id"></Input>
          </FormItem>
          <FormItem label="模块">
              <Input v-model="formItem.model" v-if="formItem.menu_name=='root'" disabled placeholder="请输入模块"></Input>
              <Input v-model="formItem.model" v-else placeholder="请输入模块"></Input>
          </FormItem>
          <FormItem label="图标">
              <Input v-model="formItem.menu_icon" v-if="formItem.menu_name=='root'" disabled placeholder="请输入ICON"></Input>
              <Input v-model="formItem.menu_icon" v-else placeholder="请输入ICON"></Input>
          </FormItem>
          <FormItem label="组件名">
              <Input v-model="formItem.compname" v-if="formItem.menu_name=='root'" disabled placeholder="请输入Vue组件名"></Input>
              <Input v-model="formItem.compname" v-else placeholder="请输入Vue组件名"></Input>
          </FormItem>
          <FormItem label="组件路径">
              <Input v-model="formItem.comppath" v-if="formItem.menu_name=='root'" disabled placeholder="请输入Vue组件路径"></Input>
              <Input v-model="formItem.comppath" v-else placeholder="请输入Vue组件路径"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" v-if="formItem.operation==1 && formItem.menu_name!='root'" @click="addMenu">新增</Button>
              <Button type="primary" v-else-if="formItem.menu_name!='root'" @click="saveMenu">保存</Button>
              <Button style="margin-left: 8px" @click="delMenu(formItem)" v-if="formItem.menu_name!='root'">删除</Button>
          </FormItem>
      </Form>
      <Alert type="warning" show-icon>
          温馨提示
          <template slot="desc">
          1、root菜单系统默认菜单，不能删除，也不能编辑。<br>
          2、新增菜单，需先点左侧菜单列表，对应的加号（+）号，生成临时菜单信息并进行编辑。<br>
          3、本系统采用的图片为iview框架的icon图标，请参见iview前端框架文档。<br>
          4、新增、编辑、删除的菜单，不会马上加载到路由上，需重新登录方可见。
          </template>
      </Alert>
    </div>
</Content>
</template>
<script>
import {
  _getMenuList,
  _MenuSave,
  _MenuAdd,
  _MenuDel
} from "@/services/sys/menu";
import { mapState, mapActions } from "vuex";
export default {
  name: "menuList",
  data: () => ({
      treeData:{},
      formItem: {},
      domain:'',
      radioSelected:0
  }),
  mounted(){
    this.getMenuList();
  },
  methods:{
      getMenuList: function(domain){
          _getMenuList({
            domain: '10001'
          })
          .then(res => {
              this.treeData = res.data[0];
          })
          .catch(() => {
              this.$Loading.error();
          });
      },
      addMenu(){
          _MenuAdd(this.formItem)
          .then(res => {
              console.log("_MenuAdd===>",res)
              if(!res.error.code){
                  this.$Notice.success({
                      title: '系统提示',
                      desc:  res.error.msg
                  });
                  this.getMenuList();
              }
          })
          .catch(() => {
              this.$Loading.error();
          });
      },
      saveMenu(){
          _MenuSave(this.formItem)
          .then(res => {
              console.log("_MenuSave===>",res)
              if(!res.error.code){
                  this.$Notice.success({
                      title: '系统提示',
                      desc:  res.error.msg
                  });
                  this.getMenuList();
              }
          })
          .catch(() => {
              this.$Loading.error();
          });
      },
      delMenu(formItem){
         console.log("delMenu====>",formItem.menu_id)
          _MenuDel({
            id: formItem.menu_id
          })
          .then(res => {
                console.log("delMenu====>res",res)
                this.$Notice.success({
                    title: '系统提示',
                    desc:  res.error.msg
                });
               this.formItem = {}
               this.getMenuList();
          })
          .catch(() => {
              this.$Loading.error();
          });
      },
      makeFolder: function(item) {
        Vue.set(item, "children", []);
        this.addItem(item);
      },
      addItem: function(item) {
        item.children.push({
          name: "新菜单",
          pid:item.id,
          domain:item.domain,
          operation:1,
          id:9999
        });
      },
      ckItem: function(item,event){
        this.formItem = {
          menu_id:item.id,
          menu_name:item.name,
          pid:item.pid,
          model:item.model,
          domain:item.domain,
          compname:item.compname,
          comppath:item.comppath,
          operation:item.operation,
          menu_icon:item.menu_icon
        }
        this.radioSelected = item.id;
        console.log('ckItem==>',item)
      },
      radioSelectedFun: function(data){
        console.log('radioSelectedFun===>',data)
      }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="postcss" scoped>
#menuList {
  & .tree-left{
    float: left;
    width: 30%;
    padding-left: 1rem;
  }
  & .tree-middel{
    float: left;
    width: 50%;
    border-left: #E7EAEC;
    border-left-style: solid;
    border-left-width: 1px;
    padding-left: 1rem;
  }
  & .tree-right{
    float: left;
    width: 20%;
    border-left: #E7EAEC;
    border-left-style: solid;
    border-left-width: 1px;
    padding-left: 1rem;
  }
}
</style>
